<template>
  <div class="music-list">
    <div class="back" @click.stop.prevent="back">
      <i class="icon-back"></i>
    </div>
    <h1 class="title" v-html="title"></h1>
    <div class="bg-img" ref="bgImg" :style="bgStyle">
      <div class="play-wrap">
        <div class="play-btn" ref="playBtn" v-show="songs.length" @click.stop.prevent="playRandom">
          <i class="icon-play"></i>
          <span class="text">随机播放</span>
        </div>
      </div>
      <div class="filter" ref="filter"></div>
    </div>
    <div class="bg-layer" ref="bgLayer"></div>
    <scroller class="list" ref="list" :data="songs" :listen-scroll="listenScroll" :probe-type="probeType"
              @scroll="scroll">
      <div class="song-list-wrap">
        <song-list :songs="songs" @selectSong="selectSong" :rank="rank"></song-list>
      </div>
    </scroller>
  </div>
</template>

<script>
  import Scroller from '../base/scroll/scroll.vue';
  import SongList from '../base/song-list/song-list.vue';
  import {prefixStyle} from 'common/js/dom.js';
  import {mapActions} from 'vuex';
  import {playlistMixin} from 'common/js/mixin.js';

  const RESERVED_HEIGHT = 40;
  const transform = prefixStyle('transform');
  const backdrop = prefixStyle('backdrop-filter');

  export default {
    mixins: [playlistMixin],
    props: {
      title: {type: String, default: ''},
      bgImg: {type: String, default: ''},
      songs: {type: Array, default: []},
      rank: {type: Boolean, default: false}
    },
    components: {Scroller, SongList},
    data () {
      return {
        probeType: 3,
        listenScroll: true,
        scrollY: -1
      };
    },
    computed: {
      bgStyle () {
        return `background-image: url(${this.bgImg})`;
      }
    },
    watch: {
      scrollY (newV) {
        let layer = this.$refs.bgLayer;
        let translateY = Math.max(this.minTranslateY, newV);
        layer.style[transform] = `translate3d(0,${translateY}px,0)`;
        let zIndex = 0;
        let scale = 1;
        let blur = 0;
        const percent = Math.abs(newV / this.bgImgHeight);
        if (newV > 0) {
          scale += percent;
          zIndex = 10;
        } else {
          blur = Math.min(20, 20 * percent);
        }
        this.$refs.filter.style[backdrop] = `blur(${blur}px)`;
        let bgImg = this.$refs.bgImg;
        if (newV < this.minTranslateY) {
          zIndex = 10;
          bgImg.style.paddingTop = 0;
          bgImg.style.height = `${RESERVED_HEIGHT}px`;
          this.$refs.playBtn.style.display = 'none';
        } else {
          bgImg.style.paddingTop = '70%';
          bgImg.style.height = 0;
          this.$refs.playBtn.style.display = 'block';
        }
        bgImg.style.zIndex = zIndex;
        bgImg.style[transform] = `scale(${scale})`;
      }
    },
    methods: {
      back () {
        this.$router.go(-1);
      },
      scroll (pos) {
        this.scrollY = pos.y;
      },
      selectSong (song, index) {
//        console.log(this.songs);
        this.playSong({
          list: this.songs,
          index: index
        });
      },
      playRandom () {
//        console.log(this.songs);
        this.randomPlay({
          list: this.songs
        });
      },
      handlePlaylistAction (playlist) {
        const bottom = playlist.length > 0 ? '60px' : '';
        this.$refs.list.$el.style.bottom = bottom;
        this.$refs.list.refresh();
      },
      ...mapActions([
        'playSong',
        'randomPlay'
      ])
    },
    mounted () {
      this.bgImgHeight = this.$refs.bgImg.clientHeight;
      this.minTranslateY = -this.bgImgHeight + RESERVED_HEIGHT;
      this.$refs.list.$el.style.top = `${this.bgImgHeight}px`;
    }
  };
</script>

<style lang="less" scoped="">
  @import '~common/css/variable.less';
  @import "~common/css/mixin.less";

  .music-list {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: @color-background;
    .back {
      position: absolute;
      top: 0;
      left: 6px;
      z-index: 100;
      .icon-back {
        display: inline-block;
        padding: 10px;
        font-size: @font-size-large;
        color: @color-theme;
      }
    }
    .title {
      position: absolute;
      left: 0;
      width: 100%;
      line-height: 40px;
      text-align: center;
      font-size: @font-size-large;
      color: @color-text-d;
      z-index: 50;
      .no-wrap
    }
    .bg-img {
      position: relative;
      width: 100%;
      height: 0;
      padding-top: 70%;
      transform-origin: top;
      background-size: cover;
      .play-wrap {
        position: absolute;
        bottom: 20px;
        width: 100%;
        z-index: 50;
        .play-btn {
          box-sizing: border-box;
          width: 135px;
          padding: 7px 0;
          margin: 0 auto;
          text-align: center;
          border: 1px solid @color-theme;
          color: @color-theme;
          border-radius: 100px;
          .icon-play {
            display: inline-block;
            vertical-align: middle;
            margin-right: 6px;
            font-size: @font-size-medium-x;
          }
          .text {
            display: inline-block;
            vertical-align: middle;
            font-size: @font-size-small;
          }
        }
      }
      .filter {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(7, 17, 27, 0.4);
      }
    }
    .bg-layer {
      position: relative;
      height: 100%;
      background: @color-background;
    }
    .list {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      background: @color-background;
      .song-list-wrap {
        padding: 20px 30px;
      }
    }
  }
</style>
